<template>
  <div>
    <ul class="choose">
      <li v-for="(item,index) in items" @click="chooseSearch(item.key,item.iconState,index)" :class="{'liLg':chooseState&& item.key === chooseClass}">{{item.name}}
        <i v-if="item.iconState" class="icon iconfont"
           :class="chooseState&& item.key === chooseClass ? 'icon-iconfontunfold' :'icon-down'"></i>
      </li>
    </ul>
    <ul class="choose_classify" v-if="chooseState">
      <li v-for="(type,index) in mchtType">
        <button v-if="mchtType !== facilities" :class="buttonIndex[type.key ? 0:1] === index ? 'hot':''"
                @click="typeMethod(index,type)">{{type.name}}
        </button>
        <button v-else :class="{hot:type.checked}" @click="typeMethod(index,type)">{{type.name}}</button> <!--多选-->
      </li>
      <li v-if="mchtType == facilities" class="facButton">
        <button type="button" class="facButtonColor" @click="resetType">重置</button>
      </li>
      <li v-if="mchtType == facilities" class="facButton">
        <button type="button" class="hot" @click="facBtn">确定</button>
      </li>
    </ul>
    <slot></slot>
  </div>
</template>

<script>
  import getData2 from 'src/service/getData2'
  import {mapState} from 'vuex'
  import {Storage} from 'src/utils/storage.js'

  export default {
    data: () => ({
      dicTypeB: [], // 主分类下级分类
      facilities: [
        {key: 1, name: 'WIFI', checked: false},
        {key: 2, name: '可停车', checked: false},
        {key: 3, name: '刷卡', checked: false},
        {key: 4, name: '卡座', checked: false},
        {key: 5, name: '包间', checked: false},
        {key: 6, name: '宝宝椅', checked: false},
        {key: 7, name: '无烟区', checked: false},
        {key: 8, name: '吸烟区', checked: false},
        {key: 9, name: '沙发位', checked: false},
        {key: 10, name: '露天位', checked: false},
        {key: 11, name: '表演', checked: false},
        {key: 12, name: '景观位', checked: false}
      ],
      perCapitaList: [
        {name: '50以下', key: '', value: '0-50'},
        {name: '50-100', key: '', value: '50-100'},
        {name: '100-300', key: '', value: '100-300'},
        {name: '300以上', key: '', value: '300-*'},
      ],
      mchtType: [],
      chooseClass: '', // 选择的选项
      buttonIndex: [], // 主分类下级分享下标数组，下标0为次分类，下标1为人均
    }),
    props: {
      items: {
        type: Array,
        default: () => [
          {key: "附近", name: "附近", iconState: false},
          {key: "全部", name: "全部", iconState: true},
          {key: "人均", name: "人均", iconState: true},
          {key: "设施", name: "设施", iconState: true},
        ]
      },
      chooseState: {
        type: Boolean,
        default: false // 下拉开启关闭
      },
      searchDictId: {
        type: String,
        default: ""
      }
    },
    watch: {
      async searchDictId(id) { // 主分类发生变化，重新请求下级分类
        this.chooseState = false;
        this.items.forEach(data => data.name = data.key); // 恢复初始选项
        this.buttonIndex = [];
        this.resetType();
        this.queryMcht(); // 查询商户列表信息
        let result = await getData2.upperDictId({}, id);
        this.dicTypeB = result.content.map(data => ({key: data.dictId, name: data.dictValue}));

      },
      chooseState(state) { // 下拉选项开启关闭，父组件开启关闭遮罩
        this.$emit('shadeState', state);
      }
    },
    computed: {
      ...mapState({
        position: state => state.coupon.position, //用户地理位置
      }),
    },
    methods: {
      queryMcht() { // 查询商户列表信息
        let mchtFacil = '';
        this.facilities.forEach(data => {
          if (data.checked) {
            mchtFacil = mchtFacil + '1';
          } else {
            mchtFacil = mchtFacil + '0';
          }
        });
        mchtFacil === "000000000000" ? mchtFacil = "*" : ''; // 设施全部为0，为*号
        let searchMchType;
        if (this.buttonIndex[0] >= 0) {
          searchMchType = this.dicTypeB[this.buttonIndex[0]].name;
        }
        let perScope;
        if (this.buttonIndex[1] >= 0) {
          perScope = this.perCapitaList[this.buttonIndex[1]].value
        }
        let params = {
          method: 'post',
          data: {
            mchtName: '*',
            near: '', // 空为附近
            facilities: mchtFacil, // 设施
            mchtType: searchMchType ? searchMchType : this.searchDictId, //商户主分类ID或者商户次分类中文名称
            perScope: perScope || '', // 人均
            flag: this.searchDictId == '9008' ? 1 : 0,
            couponType: '*',
            position: this.position || '',
            page: 1,
            rows: 10,
            cityName: Storage.get('city', true)
          }
        };
        this.$emit('queryEightMcht', params);
      },
      typeMethod(index, type) { // 选择二级分类
        if (this.mchtType == this.facilities) {
          this.facilities[index].checked = !this.facilities[index].checked;
        } else {
          if (type.key) {
            this.buttonIndex[0] = index;
          } else {
            this.buttonIndex[1] = index;
          }
          this.items.forEach(data => {
            if (data.key === this.chooseClass) {
              data.name = type.name
            }
          });
          this.queryMcht(); // 查询商户列表信息
          this.chooseState = false // 关闭下拉
        }
      },
      chooseSearch(value, state, index) {
        if (!state) { // 附近选项不进行下拉选择
          return;
        }
        if (this.chooseClass === value) { // 与上次选择同一个进行关闭下拉
          this.chooseState = !this.chooseState;
        } else { // 不同则开启下拉
          this.chooseState = true;
        }
        this.chooseClass = value; // 赋值搜索项，用于下次判断
        if (this.chooseState) {
          switch (value) {
            case '全部':
              this.mchtType = this.dicTypeB;
              break;
            case '人均':
              this.mchtType = this.perCapitaList;
              break;
            case '设施':
              this.mchtType = this.facilities;
              break;
          }
        }
      },
      facBtn() {
        this.chooseState = false;
        this.queryMcht(); // 查询商户列表信息
      },
      resetType() {
        this.facilities.forEach(data => data.checked = false); // 选项重置
      }
    }
  }
</script>

<style lang="scss" scoped="">
  .liLg{
    font-weight: 500;
  }
  ul.choose {
    display: flex;
    display: -webkit-flex;
    height: 2.86rem;
    line-height: 2.86rem;
    border-bottom: 1px solid #ededed;
    li {
      color: #444444;
      font-size: 0.85rem;
      flex: auto;
      text-align: center;
      i.icon-down {
        font-size: 0.6rem;
      }
    }
  }

  ul.choose_classify {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    background-color: #f5f5f5;
    padding: 0.7rem 0 1.4rem 0;
    li {
      position: relative;
      left: .70rem;
      text-align: center;
      margin-right: 0.7rem;
      margin-top: 0.7rem;
      button {
        width: 5.7rem;
        height: 2.2rem;
        border-radius: 3px;
        background-color: rgb(255, 255, 255);
        color: #666666;
      }
      button.hot {
        background-color: rgb(236, 78, 138);
        color: #ffffff;
      }
    }
    li.facButton {
      button {
        width: 12.15rem;
        height: 2.2rem;
        border-radius: 3px;
        color: #ffffff;
      }
      .facButtonColor {
        border: 1px solid rgb(236, 78, 138);
        color: rgb(236, 78, 138);
      }

    }
  }
</style>